<template>
	<div class="wrapper" v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(0, 0, 0, 0.8)">
		<div class="title">
			<div class="module-title">
				<img src="../../../assets/images/home08.png" alt="" />
				<span>军检统计</span>
			</div>
			<div class="select-time">
				<el-date-picker v-model="timeRange" value-format="yyyy-MM-dd" format="yyyy年M月d日" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" :clearable="false" style="width: 260px; margin-right: 1rem"></el-date-picker>
			</div>
		</div>
		<div class="module-content">
			<div class="left" @click="getDataList(0)">
				<div class="num">{{ data1 }}</div>
				<div class="name">军检合格</div>
			</div>
			<div class="right" @click="getDataList(1)">
				<div class="num">{{ data2 }}</div>
				<div class="name">军检不合格</div>
			</div>
		</div>
		<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body v-dialogDrag>
			<div style="height: 70vh; overflow-y: auto">
				<el-table :data="tableList" border>
					<el-table-column label="序号" align="center" type="index" width="55" />
					<el-table-column label="返修单号" prop="repairNumber" />
					<el-table-column label="返修产品" prop="productModel" />
					<el-table-column label="产品编号" prop="productNumber" />
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getFirstDayOfYear, getLastDayOfYear } from "@/utils/index"
import { qualified, unqualified } from "@/api/home.js"

export default {
	data() {
		return {
			title: "",
			open: false,
			tableList: [],
			timeRange: "",
			data1: 0,
			data2: 0,
			list1: [],
			list2: [],
			loading: false
		}
	},
	watch: {
		timeRange: {
			handler(newVal, oldVal) {
				this.getData()
			},
			deep: true
		}
	},
	created() {
		this.timeRange = [getFirstDayOfYear(), getLastDayOfYear()]
	},
	methods: {
		getDataList(index) {
			if (index == 0) {
				this.tableList = this.list1
				this.title = "军检合格"
			} else {
				this.tableList = this.list2
				this.title = "军检不合格"
			}
			this.open = true
		},
		async getData() {
			try {
				this.loading = true
				let res_qualified = await qualified({
					beginTime: this.timeRange[0],
					finishTime: this.timeRange[1]
				})
				// console.log(res_qualified)
				this.data1 = res_qualified.data.length
				this.list1 = res_qualified.data
				let res_unqualified = await unqualified({
					beginTime: this.timeRange[0],
					finishTime: this.timeRange[1]
				})
				// console.log(res_unqualified)
				this.data2 = res_unqualified.data.length
				this.list2 = res_unqualified.data
				this.loading = false
			} catch (error) {
				this.loading = false
				console.error(error)
				this.$modal.msgError("获取军检数据统计错误", error)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	height: 50%;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	margin-bottom: 1rem;
}

.wrapper .title {
	width: 100%;
	height: 3.125rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wrapper .title .module-title {
	width: 50%;
	height: 3.125rem;
	line-height: 3.125rem;
	font-size: 1.125rem;
	color: #3f949d;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	background: url("../../../assets/images/home07.png") no-repeat;
	background-size: 100% 110%;
	white-space: nowrap;
	overflow: hidden;
}

.wrapper .title .module-title img {
	margin: 0 1.625rem;
}

.wrapper .title .select-time {
	text-align: right;
}

.module-content {
	height: calc(100% - 3.125rem);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: nowrap;
	overflow: hidden;
	.left,
	.right {
		width: 14.5rem;
		height: 9.875rem;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: url("../../../assets/images/home09.png") no-repeat;
		background-size: 100% 100%;
		transition: all 0.3 linear;

		.num {
			font-size: 1.875rem;
			color: #3ca2bc;
			letter-spacing: 1px;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			height: 2.25rem;
			line-height: 2.25rem;
			margin-bottom: 1.125rem;
		}
		.name {
			font-size: 1.25rem;
			color: #3da3a3;
			text-align: center;
			line-height: 1.875rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.left:hover,
	.right:hover {
		transform: scale(1.1);
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}
}

::v-deep .el-range__close-icon {
	display: none;
}

::v-deep .el-date-editor .el-range-input {
	color: #090909;
}

::v-deep .el-date-editor .el-range__icon {
	color: #3f949d;
}

::v-deep .el-range-editor--mini.el-input__inner {
	border: 1px solid #6ac7c9;
}
</style>
